<template>
    <a-layout id="components-layout-custom-trigger">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            <div class="logo">隧道二衬管理系统</div>
            <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" mode="inline"
                theme="dark" :inline-collapsed="state.collapsed" :items="items" @click="toView"></a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0">
                <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
                <span>
                    首页 
                    <span v-if="state.preOpenKeys[0] !== '首页'" style="color: #97a8be;">/ {{ state.preOpenKeys[0] }}</span>
                </span>

                <a-dropdown class="dropdown">
                    <a class="ant-dropdown-link" @click.prevent>
                    <a-avatar src="/src/assets/img/tx.jpg" />
                        <CaretDownOutlined />
                    </a>
                    <template #overlay>
                    <a-menu>
                        <a-menu-item>
                        <a href="javascript:;">个人中心</a>
                        </a-menu-item>
                        <a-menu-item>
                        <a href="javascript:;">个人设置</a>
                        </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item>
                        <a href="javascript:;">退出登录</a>
                        </a-menu-item>
                    </a-menu>
                    </template>
                </a-dropdown>
            </a-layout-header>
            <div style="padding: 20px 20px 0 20px;">
                <a-tag v-for="(item, index) in tagList" :key="index" @click="checkTab(item)"
                    :class="{ active: state.selectedKeys[0] === item.url }" class="tags">
                    {{ item.title }}
                    <span @click="closeTag(item.url, index)" v-if="item.url !== '/admin/index'">
                        <CloseOutlined />
                    </span>
                </a-tag>
            </div>
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
                <router-view></router-view>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { items } from '@/testData/menu'
import { state, toView, checkTab, closeTag, tagList } from '@/compositions/layoutComposition'
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    CloseOutlined,
    CaretDownOutlined
} from '@ant-design/icons-vue';
const collapsed = ref(false);
</script>
<style scoped lang="scss">
#components-layout-custom-trigger {
    height: 100%;

    .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
            color: #1890ff;
        }
    }

    .logo {
        padding: 16px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        text-shadow: 2px 2px 2px #ccc;
    }
}

.active {
    background-color: #0c5294;
    color: white;
}

.tags {
    cursor: pointer;

    span {
        &:hover {
            opacity: .7;
        }
    }
}

.dropdown {
    float: right;
    margin-right: 20px;
}
</style>